td_official/src/views/gisHome/component/leftMain.vue

<template>
  <div class="situation">
    <div class="main">
      <div class="title">
        <div class="flex items-center">
          <img src="@/assets/images/ligner.png" alt="" />
          <div class="w100% flex justify-between items-center">
            <div class="subTitle flex items-center">
              <img src="@/assets/images/jigong.png" alt="" />
              <span>人员情况</span>
            </div>
            <div class="hint">PERSONNEL SITUATION</div>
          </div>
          <div class="mark"></div>
        </div>
        <div class="ligner"></div>
      </div>
      <div class="cardList">
        <div class="card">
          <div class="iconImg">
            <img src="@/assets/images/totalnumber.png" alt="" />
          </div>
          <p>总人数</p>
          <div class="peopleNum"><span>259</span>人</div>
        </div>
        <div class="card">
          <div class="iconImg">
            <img src="@/assets/images/attendanceperson.png" alt="" />
          </div>
          <p>出勤人</p>
          <div class="peopleNum"><span>259</span>人</div>
        </div>
        <div class="card">
          <div class="iconImg">
            <img src="@/assets/images/Attendancerate.png" alt="" />
          </div>
          <p>出勤率</p>
          <div class="peopleNum"><span>100</span>%</div>
        </div>
      </div>
      <div class="title">
        <div class="flex items-center">
          <img src="@/assets/images/ligner.png" alt="" />
          <div class="flex justify-between w100% items-center">
            <div class="subTitle flex items-center">
              <img src="@/assets/images/Machinery.png" alt="" />
              <span>机械情况</span>
            </div>
            <div class="hint">MECHANICAL CONDITION</div>
          </div>
          <div class="mark"></div>
        </div>
        <div class="ligner"></div>
      </div>
      <div class="machinery" id="machineryMain"></div>
      <div class="title">
        <div class="flex items-center">
          <img src="@/assets/images/ligner.png" alt="" />
          <div class="flex justify-between w100% items-center">
            <div class="subTitle flex items-center">
              <img src="@/assets/images/order.png" alt="" />
              <span>材料情况</span>
            </div>
            <div class="hint">MATERIAL STATUS</div>
          </div>
          <div class="mark"></div>
        </div>
        <div class="ligner"></div>
      </div>
      <div class="order" id="orderMain"></div>
    </div>
    <div class="topleft"></div>
    <div class="bottomright"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;

const initMachinerycharts = () => {
  let chartDom = document.getElementById('machineryMain');
  let myMachineryChart = echarts.init(chartDom);
  let option: EChartsOption;

  // prettier-ignore
  let dataAxis = ['水泥机', '搅拌机', '拖拉机', '推土机', '推土机', '推土机','推土机', ];
  // prettier-ignore
  let data = [11, 23, 21, 20, 22, 24, 24];

  option = {
    title: {
      subtext: '单位：台数'
    },
    grid: {
      // 让图表占满容器
      top: '45vh',
      bottom: '50vh'
    },
    xAxis: {
      data: dataAxis,
      axisLabel: {
        // inside: true,
        color: 'rgba(202, 218, 226, 1)'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },

      z: 10
    },
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#999'
      },
      min: 0,
      max: 40,
      interval: 10,
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(108, 128, 151, 0.3)',
          width: 1,
          type: 'dashed'
        }
      }
    },
    dataZoom: [
      {
        show: true,
        type: 'slider',
        xAxisIndex: 0,
        // 滚动条背景颜色
        backgroundColor: 'rgba(8, 14, 15, .3)',
        // 选中区域的背景颜色
        fillerColor: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(67, 226, 203, 1)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(21, 181, 230, 1)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        showDataShadow: false,
        // 手柄大小
        handleSize: 0,
        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
        moveHandleSize: 0, //移动手柄的大小
        // 滚动条高度
        height: 12,
        borderRadius: 8,
        borderColor: 'rgba(8, 14, 15, .3)',
        // 滚动条与图表的距离
        bottom: 5,
        handleSize: 5,
        // dataZoom-slider组件离容器下侧的距离
        // bottom: 0,
        // 两侧缩放手柄的 icon 形状
        handleIcon:
          'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 画一个圆形
        handleStyle: {
          borderWidth: 5,
          borderCap: 'round',
          borderRadius: 20, // 设置滑块的圆角大小
          color: 'rgba(27,90,169,1)', // 设置滑块的颜色
          shadowBlur: 3, // 设置滑块阴影的模糊大小
          shadowColor: 'rgba(0, 0, 0, 0.6)', // 设置滑块阴影的颜色
          shadowOffsetX: 1, // 设置滑块阴影的水平偏移
          shadowOffsetY: 2 // 设置滑块阴影的垂直偏移
        },
        start: 0,
        // 计算初始结束百分比
        end: (6 / data.length) * 100
      }
    ],

    series: [
      {
        type: 'bar',
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(25, 181, 251, 1)' },
            { offset: 1, color: 'rgba(67, 158, 255, 0)' }
          ])
        },
        barWidth: '13vh',
        data: data
      }
    ]
  };

  option && myMachineryChart.setOption(option);
};

const initOrderChart = () => {
  let chartDom = document.getElementById('orderMain');
  let myMachineryChart = echarts.init(chartDom);
  let option: EChartsOption;

  // prettier-ignore
  let data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      left: 'right', //位置
      icon: 'roundRect', //形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
      itemWidth: 15, // 设置宽度
      itemHeight: 4, // 设置高度
      itemGap: 27, // 设置间距
      top: 10, // 设置圆角
      data: ['入库量', '领用量'],
      textStyle: {
        //文字样式
        color: '#B4CEFF',
        fontSize: '12'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0',
      containLabel: true,
      width: '90%'
    },
    xAxis: {
      type: 'value',
      show: false
    },
    yAxis: {
      type: 'category',
      data,
      offset: 60,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      inverse: true,
      axisLabel: {
        formatter: function (value, index) {
          return `{${data[index]}|No.${index + 1}} {value|${value}}`;
        },
        align: 'left',
        color: 'rgba(230, 247, 255, 1)',
        rich: {
          Mon: {
            color: 'rgba(230, 247, 255, 1)',
            fontSize: 12,
            align: 'center',
            width: 31,
            height: 23,
            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: 'rgba(255, 208, 59, 1)' },
              { offset: 1, color: 'rgba(255, 208, 59, 0)' }
            ])
          },
          Tue: {
            color: 'rgba(230, 247, 255, 1)',
            fontSize: 12,
            align: 'left',
            width: 31,
            height: 23,
            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: 'rgba(31, 189, 237, 1)' },
              { offset: 1, color: 'rgba(31, 189, 237, 0)' }
            ])
          },
          Wed: {
            color: 'rgba(230, 247, 255, 1)',
            fontSize: 12,
            align: 'left',
            width: 31,
            height: 23,
            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: 'rgba(67, 226, 203, 1)' },
              { offset: 1, color: 'rgba(67, 226, 203, 0)' }
            ])
          }
        }
      }
    },
    dataZoom: [
      {
        // 设置滚动条的隐藏或显示
        show: true,
        // 设置类型
        type: 'slider',
        // 设置背景颜色
        backgroundColor: 'rgba(8, 14, 15, .3)',

        // 设置选中范围的填充颜色
        fillerColor: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(67, 226, 203, .5)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(21, 181, 230, .5)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        borderColor: 'rgba(8, 14, 15, .3)',
        borderCap: 'round',
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: false,
        // handleSize: 0,
        moveHandleSize: 0, //移动手柄的大小
        borderRadius: 20, //滚动条圆角
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值（一页显示多少条数据）
        endValue: 4,
        handleSize: 5,
        // dataZoom-slider组件离容器下侧的距离
        // bottom: 0,
        // 两侧缩放手柄的 icon 形状
        handleIcon:
          'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 画一个圆形
        handleStyle: {
          borderWidth: 5,
          borderCap: 'round',
          borderRadius: 20, // 设置滑块的圆角大小
          color: 'rgba(27,90,169,1)', // 设置滑块的颜色
          shadowBlur: 3, // 设置滑块阴影的模糊大小
          shadowColor: 'rgba(0, 0, 0, 0.6)', // 设置滑块阴影的颜色
          shadowOffsetX: 1, // 设置滑块阴影的水平偏移
          shadowOffsetY: 2 // 设置滑块阴影的垂直偏移
        },
        // 控制哪个轴，如果是number表示控制一个轴，
        // 如果是Array表示控制多个轴。此处控制第二根轴
        yAxisIndex: [0, 1],
        // empty：当前数据窗口外的数据，被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: 'empty',
        // 滚动条高度
        width: 12,
        // 滚动条显示位置
        height: '70%',
        // 距离右边
        right: 5,
        showDataShadow: false, //是否显示数据阴影 默认auto
        // 组件离容器上侧的距离
        // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
        top: 'middle'
      },
      {
        // 没有下面这块的话，只能拖动滚动条，
        // 鼠标滚轮在区域内不能控制外部滚动条
        type: 'inside',
        // 控制哪个轴，如果是number表示控制一个轴，
        // 如果是Array表示控制多个轴。此处控制第二根轴
        yAxisIndex: [0, 1],
        width: 20,
        // 滚轮是否触发缩放
        zoomOnMouseWheel: false,
        // 鼠标移动能否触发平移
        moveOnMouseMove: true,
        // 鼠标滚轮能否触发平移
        moveOnMouseWheel: true
      }
    ],

    series: [
      {
        name: '入库量',
        type: 'bar',
        stack: 'total',
        itemStyle: {
          color: 'rgba(67, 226, 203, 1)'
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 302, 301, 334, 345, 356, 367],
        barWidth: 3
      },
      {
        name: '领用量',
        type: 'bar',
        stack: 'total',
        itemStyle: {
          color: 'rgba(31, 189, 237, 1)'
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 152, 103, 150],
        showBackground: true,
        barWidth: 3,
        backgroundStyle: {
          color: 'rgba(217, 231, 255, 0.1)'
        }
      }
    ]
  };
  option && myMachineryChart.setOption(option);
};

onMounted(() => {
  initMachinerycharts();
  initOrderChart();
});
</script>

<style lang="scss" scoped>
@import '../css/gis.scss';

#machineryMain {
  width: vw(421);
  height: vh(222);
  margin-left: vw(14);
  margin-bottom: vh(30);
}

#orderMain {
  width: 100%;
  padding-right: vw(14);
  height: vh(300);
}
.title {
  > div > img {
    width: vw(14);
    height: vh(35);
  }

  .subTitle {
    img {
      width: vw(18.8);
      height: vh(20);
      margin-right: vw(10);
    }

    span {
      text-shadow: 0 0 vw(8) rgba(2, 3, 7, 0.35);
      font-size: vw(20);
      font-weight: 500;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 1);
    }
  }

  .hint {
    font-size: vw(14);
    font-weight: 400;
    color: rgba(204, 204, 204, 0.5);
    margin-right: vw(20);
  }

  .mark {
    width: vw(2);
    height: vh(14);
    background: rgba(67, 226, 203);
    margin-right: vw(10);
  }

  .ligner {
    height: vh(1);
    background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
    margin-left: vw(14);
  }
}
.situation {
  width: vw(449);
  height: vh(927);
  background: rgb(1, 26, 33, 0.4);
  backdrop-filter: blur(vw(8));
  position: absolute;
  top: vh(122);
  left: vw(21);
  .main {
    padding-top: vh(30);

    .cardList {
      padding: 0 vw(20);
      margin-top: vh(20);
      margin-bottom: vh(30);
      display: flex;
      justify-content: space-between;

      .card {
        border: vw(1) dashed rgba(67, 226, 203, 0.3);
        width: vw(112);
        height: vh(155);
        padding-top: vh(15);
        text-align: center;
        color: rgba(255, 255, 255, 1);

        img {
          width: vw(44);
          margin-bottom: vh(20);
        }

        > p {
          font-size: vw(14);
          margin-top: 0;
          margin-bottom: vh(10);
          font-family: '思源黑体';
        }

        .peopleNum {
          font-weight: 400;
          font-size: vw(14);

          text-shadow: 0 vw(1.24) vw(6.21) rgba(0, 190, 247, 1);
          color: rgba(230, 247, 255, 1);

          span {
            font-size: vw(24);
            font-weight: 700;
          }
        }
      }
    }
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: vw(2);
    background: linear-gradient(to bottom right, #43e2cb 0%, transparent 50%);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.4;
    z-index: -1;
  }

  .topleft {
    width: vw(7);
    height: vw(7);
    position: absolute;
    top: vh(1);
    left: vw(1);
    background-image: url('@/assets/images/topleft.png');
  }

  .bottomright {
    width: vw(7);
    height: vw(7);
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: url('@/assets/images/bottomright.png');
  }
}
</style>