l

liukangdong

2024-10-28 c205de44f60c42dc1fc75b1dab32bbdd971534d9

 screen/src/views/TaskEfficiency.vue

@@ -177,6 +177,21 @@
                <div class="num">1</div>
              </div>
            </div>
            <div class="echart_wrap">
              <div class="echart3" id="echart3"></div>
            </div>
            <div class="list">
              <div class="line" v-for=" i in 7">
                <div class="time_wrap">
                  <div class="time">12.40</div>
                  <div class="sp"></div>
                  <div class="dian"></div>
                </div>
                <div class="id_card">皖A12313</div>
                <div class="status">开始作业</div>
                <div class="desc">排队等待叫号</div>
              </div>
            </div>
          </div>
          <div class="right_box_two">
            <div class="com_header">
@@ -226,8 +241,9 @@
import Percent from '@/components/percent.vue'
import dayjs from 'dayjs'
import ChargeRate from '@/components/ChargeRate.vue'

import * as echarts from 'echarts'


const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
@@ -272,12 +288,310 @@
    myChart.resize()
  })
}
const initEchart2 = () => {
  const myChart = echarts.init(document.getElementById('echart2'))
  const option = {
    grid: {
      top: '32%',
      left: '0%',
      right: '7%',
      bottom: '0%',
      containLabel: true,
    },
    legend: {
      itemGap: 24,
      data: ['分时作业量', '累计作业量'],
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10,
      top: '6%',
      textStyle: {
        color: '#fff',
        borderColor: '#fff'
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      backgroundColor: "rgba(9, 24, 48, 0.5)",
      borderColor: "rgba(75, 253, 238, 0.4)",
      textStyle: {
        color: "#FFF",
      },
    },
    xAxis: [{
      nameGap: 5,
      type: 'category',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#999'
        },
      },
      axisLabel: {
        color: '#9eaaba',
      },
      axisTick: {
        show: false,
      },
      data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023',],
    }],
    yAxis: [
      {
        nameTextStyle: {
          color: '#9eaaba',
        },
        offset: 0,
        name: '万支',
        type: 'value',
        axisLabel: {
          show: true,
          color: "#9eaaba",
        },
        axisLine: {
          show: true,
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "rgba(49,105,129,0.4)",
            type: 'dashed'
          }
        },
      },
      // {
      //   nameTextStyle: {
      //     color: '#9eaaba',
      //   },
      //   offset: 0,
      //   name: '万支',
      //   type: 'value',
      //   axisLabel: {
      //     show: true,
      //     color: "#9eaaba",
      //   },
      //   axisLine: {
      //     show: true,
      //   },
      //   splitLine: {
      //     show: true,
      //     lineStyle: {
      //       width: 1,
      //       color: "rgba(49,105,129,0.4)",
      //       type: 'dashed'
      //     }
      //   },
      // }
    ],
    series: [
      {
        name: '分时作业量',
        type: 'line',
        smooth: true,
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 0,
        lineStyle: {
          color: '#2355f5',
          borderColor: '#2355f5'
        },
        label: {
          show: false,
          position: 'top',
          color: '#fff',
        },
        itemStyle: {
          color: "#2355f5",
          lineStyle: {
            width: 0,
            type: 'solid'
          }
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#2355f5'
            },
            {
              offset: 1,
              color: 'rgba(14, 31, 65,0.1)'
            }
          ], false),
          shadowColor: 'rgba(124,248,255, 0)',
          shadowBlur: 20
        },
        data: [393, 438, 485, 631, 389, 224, 287]
      },
      {
        name: '累计作业量',
        type: 'bar',
        barWidth: 6,
        label: {
          show: false,
          position: 'top',
          color: '#fff',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#63d6fa'
            },
            {
              offset: 1,
              color: '#32718d'
            }
          ], false),
          lineStyle: {
            width: 1,
            type: 'solid'
          },
          barBorderRadius: [30, 30, 0, 0],
        },
        data: [393, 438, 485, 631, 689, 524, 687]
      },
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // 执行
    myChart.resize()
  })
}
const initEchart3 = () => {
  const myChart = echarts.init(document.getElementById('echart3'))
  var colors = [
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#7fe3fc'
    },
    {
      offset: 1,
      color: '#9ce9fc'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#64d7fa'
    }, {
      offset: 1,
      color: '#7de3fc'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#4679f6'
    }, {
      offset: 1,
      color: '#4674f6'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#4370f2'
    }, {
      offset: 1,
      color: '#61d3f9'
    }])]
  const option = {
    color: colors,
    tooltip: {
      show: false
    },
    legend: {
      show: false
    },
    series: [
      {
        type: 'funnel',
        left: '15%',
        right: '45%',
        top: '10%',
        bottom: '10%',
        minSize: '20%',
        maxSize: '80%',
        gap: 4,
        label: {
          show: false
        },

        itemStyle: {  //去掉默认白色边框线
          borderWidth: 0,
          borderColor: '#fff'
        },
        data: [
          { value: 100, name: '预约数', },
          { value: 50, name: '已进场' },
          { value: 20, name: '已作业' },
          { value: 30, name: '已离场' },
        ]
      },
      {
        type: 'funnel',
        left: '15%',
        right: '45%',
        top: '10%',
        bottom: '10%',
        minSize: '80%',
        maxSize: '80%',
        gap: 4,
        z: 1,
        label: {
          show: true,
          position: 'outside',
          formatter: '{a|{b}}  {a|{c}%}',
          rich: {
            a: {
              color: '#869CC9',
              fontSize: 13
            },
          }
        },
        labelLine: {
          show: true,
          normal: {
            length: 80,
            position: 'right',
            lineStyle: {
              width: 1,
              type: 'dashed',
              color: 'rgba(102, 160, 239,.5)'
            }
          },
        },
        itemStyle: {  //去掉默认白色边框线
          borderWidth: 0,
          borderColor: '#fff'
        },
        itemStyle: {
          normal: {
            color: 'transparent',
            borderWidth: 0,
            opacity: 1
          }
        },
        data: [
          { value: 100, name: '预约数', },
          { value: 50, name: '已进场' },
          { value: 20, name: '已作业' },
          { value: 30, name: '已离场' },
        ]
      },
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // 执行
    myChart.resize()
  })
}



onMounted(() => {
  // initEnergy()
  initEchart1()
  initEchart2()
  initEchart3()
})


@@ -561,6 +875,73 @@
          }
        }
      }

      .echart_wrap {
        width: 100%;

        .echart3 {
          width: 100%;
          height: 160px;
        }
      }

      .list {
        margin: 0 20px 0;
        width: 100%;
        height: 222px;

        .line {
          display: flex;
          align-items: center;
          font-size: 12px;
          height: 33px;
          color: #D2E0FF;
          width: 100%;

          .time_wrap {
            display: flex;
            align-items: center;
            width: 52px;
            color: #FFFFFF;

            .time {
              width: 40px;
              height: 18px;
              line-height: 18px;
              text-align: center;
              background: #00A68E;
              border-radius: 2px;
            }

            .sp {
              width: 10px;
              height: 1px;
              background: #00A68E;
            }

            .dian {
              width: 4px;
              height: 4px;
              border-radius: 50%;
              background: #00A68E;
            }
          }

          .id_card {
            flex: 6;
            margin-left: 12px;
          }

          .status {
            flex: 5;
          }

          .desc {
            flex: 9;
          }
        }
      }

    }

    .right_box_two {
@@ -647,6 +1028,7 @@
                  margin-bottom: 4px;
                  display: flex;
                  align-items: center;

                  .xf {
                    width: 14px;
                    height: 14px;