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/Attendancerate.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>
    <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 = () => {
  var chartDom = document.getElementById('machineryMain');
  var myMachineryChart = echarts.init(chartDom);
  var option: EChartsOption;

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

  option = {
    title: {
      subtext: '单位：台数'
    },
    grid: {
      // 让图表占满容器
      top: '45px',
      bottom: '50px'
    },
    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, 1)',
        // 选中区域的背景颜色
        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
        },

        // 手柄大小
        handleSize: 0,
        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
        moveHandleSize: 0, //移动手柄的大小
        // 滚动条高度
        height: 10,
        borderRadius: 8,
        // 滚动条与图表的距离
        bottom: 10,
        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: '13px',
        data: data
      }
    ]
  };

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

const initOrderChart = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu'],
      axisLabel: {
        formatter: function (value, index) {
          return '<img src="http://zmkg.cqet.top:8899/assets/product-BhSC5hsV.png" />' + value; // 不进行任何格式化
        }
      }
    },
    series: [
      {
        name: '入库量',
        type: 'bar',
        stack: 'total',
        itemStyle: {
          color: 'rgba(67, 226, 203, 1)'
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 302, 301, 334],
        label: {
          show: true,
          position: 'insideBottomRight',
          distance: 52,
          align: 'left',
          verticalAlign: 'middle',
          rotate: 0,
          fontSize: 16
        }
      },
      {
        name: '领用量',
        type: 'bar',
        stack: 'total',
        itemStyle: {
          color: 'rgba(31, 189, 237, 1)'
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134],
        barWidth: '3px'
      }
    ]
  };
};

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

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

#machineryMain {
  width: 421px;
  height: vh(222);
  margin-left: 14px;
  margin-bottom: vh(30);
}
.title {
  > img {
    width: 14px;
    height: 35px;
  }

  .subTitle {
    img {
      width: 18.8px;
      height: 20px;
      margin-right: 10px;
    }

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

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

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

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

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

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

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

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

        .peopleNum {
          font-weight: 400;
          font-size: 14px;

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

          span {
            font-size: 24px;
            font-weight: 700;
          }
        }
      }
    }
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 2px;
    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: 7px;
    height: 7px;
    position: absolute;
    top: 1px;
    left: 1px;
    background-image: url('@/assets/images/topleft.png');
  }

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