机器开机率和订单完成比率样式优化

yangfeng

2023-12-02 4981a40e2dd1ac177cdcdf29525f83f1d162f11d

机器开机率和订单完成比率样式优化

 public/cockpitPage/order-bg.png

 src/views/cockpitPage/components/MachineStartupRate.vue

@@ -8,13 +8,6 @@
          <span class="top-rate">{{ "60%" }}</span>
        </div>
      </div>
      <div class="machine-chart-bg">
        <img
          src="/cockpitPage/machine-chart-bg.png"
          alt=""
          style="width: 250px; height: 260px"
        />
      </div>
      <div class="chart" ref="chart"></div>
    </div>
  </div>
@@ -43,12 +36,31 @@
    pieChart(chartName, data) {
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      let img = "/cockpitPage/machine-chart-bg.png";
      let option;
      if (data) {
        option = {
          color: ["#065a6f", "#067687", "#00ffff"],
          tooltip: {
            trigger: "item",
          },
          graphic: {
            elements: [
              {
                type: "image",
                z: 5,
                right: 25,
                style: {
                  image: img,
                  width: 240,
                  height: 245,
                  opacity: 0.55,
                },
                left: "center",
                top: "center",
                position: [5, 5],
              },
            ],
          },
          series: [
            {
@@ -60,7 +72,17 @@
                color: "#01f7fd",
                fontSize: 14,
                formatter: function (params) {
                  return params.name + params.value + "%";
                  return `{a|${params.name}} {b|${params.value + "%"}}`;
                },
                rich: {
                  a: {
                    color: "#00ffff",
                    fontSize: 14,
                  },
                  b: {
                    color: "#fccd1d",
                    fontSize: 14,
                  },
                },
              },
              emphasis: {
@@ -121,16 +143,6 @@
          color: #fec718;
        }
      }
    }
    .machine-chart-bg {
      width: 100%;
      height: 100%;
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      opacity: 0.55;
    }
    .chart {
      margin-top: 8px;

 src/views/cockpitPage/components/OrderCompleteRadio.vue

@@ -37,7 +37,7 @@
  data() {
    return {
      tableList: [
        { title: "DD19070047", radio: 50 },
        { title: "DD19070047", radio: 50.6 },
        { title: "DD19070048", radio: 70 },
        { title: "DD19070049", radio: 85 },
        { title: "DD19070050", radio: 30 },
@@ -96,9 +96,10 @@
  .el-progress-bar__innerText {
    position: absolute;
    top: 2px;
    right: -50px;
    right: -70px;
    text-align: left;
    font-size: 18px;
    width: 60px;
  }
}
</style>

 src/views/cockpitPage/components/PerSonnelProductivity.vue

@@ -15,7 +15,7 @@
<script>
import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue";
//引入echart
import * as echarts from 'echarts'
import * as echarts from "echarts";
export default {
  components: {
    ChartTitle,
@@ -24,47 +24,47 @@
  data() {
    return {
      chartData: {
        datax: ['人员1', '人员2', '人员3', '人员4', '人员5', '人员6'],
        datax: ["人员1", "人员2", "人员3", "人员4", "人员5", "人员6"],
        datay: [120, 200, 150, 380, 470, 150, 230],
      },
    };
  },
  mounted() {
    this.pieChart('chart', this.chartData)
    this.pieChart("chart", this.chartData);
    let chartData2 = [
      { value: 10, name: "一类" },
      { value: 20, name: "二类" },
      { value: 60, name: "三类" },
      { value: 10, name: "四类" },
    ];
    this.getChartRight('chart2', chartData2)
    this.getChartRight("chart2", chartData2);
  },
  watch: {},
  methods: {
    //在职
    pieChart(chartName, data) {
      let chartDom = this.$refs[chartName]
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      let option;
      let lineColor = '#35ddc74d'
      let lineColor = "#35ddc74d";
      if (data) {
        option = {
          color: ['#00FFFF', '#dcb018'],
          color: ["#00FFFF", "#dcb018"],
          tooltip: {
            trigger: 'axis',
            trigger: "axis",
            axisPointer: {
              type: 'none'
              type: "none",
            },
          },
          grid: {
            right: "80px",
            bottom: '60px',
            left: '60px',
            top: '30px',
            bottom: "60px",
            left: "60px",
            top: "30px",
          },
          dataZoom: [
            {
              type: 'inside',
              type: "inside",
              // show: true, //显示滚动条
              start: 0,
              end: 100,
@@ -75,34 +75,34 @@
            },
            {
              //   type: 'slider', //两个一个是slider，一个是inside，slider是增加滚动条以及鼠标拖动滚动条功能，inside则是鼠标滚轮滚动滚动条。
              type: 'inside',
              type: "inside",
              // show: true,
              // realtime : true,
              yAxisIndex: 0,
              minSpan: 20,
              maxSpan: 100,
              start: 0,
              end: 100
              end: 100,
            },
          ],
          legend: {
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 35,//间距
            bottom: '5px',
            left: 'center',
            itemGap: 35, //间距
            bottom: "5px",
            left: "center",
          },
          yAxis: [
            {
              type: 'category',
              type: "category",
              axisTick: {
                show: false
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: lineColor,
                }
                },
              },
              axisLabel: {
                // rotate:45,
@@ -110,32 +110,33 @@
                show: true,
                textStyle: {
                  color: function (params, index) {
                    let colorList = ['#dcb018', '#00FFFF']
                    let colorList = ["#dcb018", "#00FFFF"];
                    if (index % 2 == 0) {
                      return colorList[0]
                      return colorList[0];
                    } else {
                      return colorList[1]
                      return colorList[1];
                    }
                  }
                  },
                },
              },
              data: data.datax ? data.datax : [],
            }
            },
          ],
          xAxis: [
            {
              type: '',
              name: '单位：件',
              type: "",
              name: "单位：件",
              // min: data.yAxis[0].min?data.yAxis.min:0,
              minInterval: 1,//坐标轴是整数
              max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5,//数据最大值加3
              interval: Math.ceil(eval(`Math.max(${data.datay})`) / 7) * 7 / 7,
              position: 'left',
              minInterval: 1, //坐标轴是整数
              max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5, //数据最大值加3
              interval:
                (Math.ceil(eval(`Math.max(${data.datay})`) / 7) * 7) / 7,
              position: "left",
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#0a112B',
                }
                  color: "#0a112B",
                },
              },
              nameTextStyle: {
                color: "#00FFFF",
@@ -145,47 +146,46 @@
                lineStyle: {
                  // 使用深浅的间隔色
                  color: lineColor,
                }
                },
              },
              axisTick: {
                show: false
                show: false,
              },

              axisLabel: {
                textStyle: {
                  color: '#00FFFF'
                  color: "#00FFFF",
                },

              }
              },
            },
          ],
          series: [
            {
              type: 'bar',
              name: '',
              barWidth: '15',
              type: "bar",
              name: "",
              barWidth: "15",
              label: {
                show: true,
                position: 'right',
                color: '#00FFFF'
                position: "right",
                color: "#00FFFF",
              },
              itemStyle: {
                normal: {
                  //柱形图圆角，初始化效果
                  barBorderRadius: [4, 4, 0, 0],
                  color: function (params) {
                    let colorList = ['#dcb018', '#00FFFF']
                    let colorList = ["#dcb018", "#00FFFF"];
                    if (params.dataIndex % 2 == 0) {
                      return colorList[0]
                      return colorList[0];
                    } else {
                      return colorList[1]
                      return colorList[1];
                    }
                  }
                  },
                },
              },
              data: data.datay,
            },
          ]
          ],
        };

        option && myChart.setOption(option);
@@ -197,54 +197,51 @@
    getChartRight(chartName, data) {
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      let img='/cockpitPage/dotted-circle.png'
      let img = "/cockpitPage/dotted-circle.png";
      let option;
      if (data) {
        option = {
          color: ["#dcb018", "#735b09", "#ebd68e",'#FF3000'],
          color: ["#dcb018", "#735b09", "#ebd68e", "#FF3000"],
          tooltip: {
            trigger: "item",
          },
          graphic:{
            elements:[
          graphic: {
            elements: [
              {
                type:'image',
                z:3,
                style:{
                  image:img,
                  width:118,
                  height:118,
                type: "image",
                z: 3,
                style: {
                  image: img,
                  width: 118,
                  height: 118,
                },
                left:'center',
                top:'center',
                position:[10,10]
             }
             
            ]
                left: "center",
                top: "center",
                position: [10, 10],
              },
            ],
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              // center: ['80%', '46%'],
              radius: ['52%','65%'],
              radius: ["52%", "65%"],
              // minAngle: 20,
              // startAngle: 60,
              avoidLabelOverlap: false,
             

              label: {
                normal:{
                  position: 'outer',
                  paddding:[-100,70],
                  
                normal: {
                  position: "outer",
                  paddding: [-100, 70],

                  color: "#01f7fd",
                  fontSize: 12,
                  borderWidth:20,
                  borderRadius:4,
                  borderWidth: 20,
                  borderRadius: 4,
                  formatter: function (params) {
                    let str=
                    params.name+
                          params.value+'%'
                    let str = params.name + params.value + "%";
                    return str;
                  },
                },
@@ -254,16 +251,16 @@
                  show: true,
                  fontSize: 12,
                  fontWeight: "bold",
                  color:'#dcb018',
                  color: "#dcb018",
                },
              },
              labelLine: {
                show: true,
                length: 20,
                length2:10,
                lineStyle:{
                  color:'#dcb018',
                }
                length2: 10,
                lineStyle: {
                  color: "#dcb018",
                },
              },
              data: data,
            },
@@ -275,9 +272,6 @@
        option = {};
        myChart.setOption(option, true);
      }


      
    },
  },
};
@@ -296,30 +290,30 @@
    .chart-left {
      width: calc(60% - 20px);
      height: 100%;
      margin-right:20px;
      float:left;
      border: 1px solid #00FFFF;
      margin-right: 20px;
      float: left;
      border: 1px solid #00ffff;
      box-sizing: border-box;
    }

    .chart-right {
      width: 40%;
      float:left;
      float: left;
      height: 100%;
      position:relative;
      .chart-bg{
        width:100%;
        position:absolute;
        top:0;
        right:0;
        img{
          width:100%;
      position: relative;
      .chart-bg {
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        img {
          width: 100%;
        }
      }
      .chart{
        position:absolute;
        top:0;
        right:0;
      .chart {
        position: absolute;
        top: 0;
        right: 0;
      }
    }