修改大屏

马宇豪

2025-04-21 cc41c6680e4230f9e3f7c8bc3552841c577d812d

 src/views/hazardousChemicals/bigScreen/components/leftTop.vue

@@ -1,8 +1,11 @@
<template>
  <div class="charts-container">
    <div class="top">
        共计<span>41515152</span>人/次
      共计<span>41515152</span>人/次
    </div>
    <el-select v-model="lineQuery.companyId" :teleported="false" placeholder="Select" size="small">
      <el-option :key="1" label="公司一" :value="1"/>
    </el-select>
    <div id="main"></div>
  </div>
</template>
@@ -10,11 +13,13 @@
import * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(()=>{
onMounted(() => {
  initChart()
})

const initChart =()=>{
const lineQuery = {
  companyId: 1
}
const initChart = () => {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;
@@ -35,7 +40,7 @@
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel:{
      axisLabel: {
        color: '#fff'
      },
      axisTick: {
@@ -45,12 +50,12 @@
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle:{
        lineStyle: {
          color: 'rgba(255,255,255,.1)',
          type: 'dashed'
        }
      },
      axisLabel:{
      axisLabel: {
        color: 'rgba(255,255,255,.6)'
      }
    },
@@ -65,17 +70,17 @@
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        label:{
        label: {
          show: true,
          color: '#fff',
          textBorderColor: 'transparent',
          fontSize: 8
        },
        // showSymbol: false,
        lineStyle:{
        lineStyle: {
          color: '#54d5ff'
        },
        itemStyle:{
        itemStyle: {
          color: '#54d5ff',
        }
      }
@@ -94,41 +99,135 @@
  font-style: normal;
  font-weight: normal;
}
.charts-container{

.charts-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
  .top{
    width: 100%;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 10px 0 20px;

    span{
      display: inline-block;
      font-family: "LKJH";
      vertical-align: middle;
      font-size: 28px;
      color: yellow;
      margin: 0 5px;
      padding: 5px 10px;
      letter-spacing: 4px;
      border-top: 1px solid #155285;
      border-bottom: 1px solid #155285;
      background:
          url('../../../../assets/bigScreen/numberBg.png') left center no-repeat,
          url('../../../../assets/bigScreen/numberBg.png') right center no-repeat;
      background-size: 1px 100%;
.top {
  width: 100%;
  font-size: 14px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: 10px 0 20px;

  span {
    display: inline-block;
    font-family: "LKJH";
    vertical-align: middle;
    font-size: 28px;
    color: yellow;
    margin: 0 5px;
    padding: 5px 10px;
    letter-spacing: 4px;
    border-top: 1px solid #155285;
    border-bottom: 1px solid #155285;
    background: url('../../../../assets/bigScreen/numberBg.png') left center no-repeat,
    url('../../../../assets/bigScreen/numberBg.png') right center no-repeat;
    background-size: 1px 100%;
  }
}

#main {
  flex: 1;
  width: 100%;
}
:deep(.el-input__wrapper){
  height: 24px;
  box-shadow: none;
  border: 1px solid #11FEEE;
  background: rgba(6,24,88,.6);
  color: #fff;

  :deep(.el-input__inner){
    font-size: 10px;
    color: red !important
  }
  .el-icon{
    display: none;
    color: #fff;
  }
}
.el-select {
  width: 100%;
  height: 24px;
}

:v-deep(.el-popper) {
  background-color: rgba(10, 31, 92, 1);
  border: 1px solid rgba(17, 254, 238, .4);
  color: #11FEEE;

  .el-icon {
    color: #11FEEE;
  }

  .el-select-dropdown__item {
    color: #11FEEE;
  }

  .el-select-dropdown__item.hover {
    background: #0049af;
  }
}

:v-deep(.el-popper__arrow) {
  &::before {
    background-color: rgba(10, 31, 92, .6) !important;
    border: 1px solid rgba(17, 254, 238, .4);
  }
}
</style>
<style lang="scss">
.charts-container{
  :deep(.el-input__wrapper){
    height: 24px;
    box-shadow: none;
    border: 1px solid #11FEEE;
    background: rgba(6,24,88,.6);
    color: #fff;

    :deep(.el-input__inner){
      font-size: 10px;
      color: #fff !important
    }
    .el-icon{
      display: none;
      color: #fff;
    }
  }
  .el-select {
    width: 100%;
    height: 24px;
  }

  :deep(.el-popper) {
    background-color: rgba(10, 31, 92, 1);
    border: 1px solid rgba(17, 254, 238, .4);
    color: #11FEEE;

    .el-icon {
      color: #11FEEE;
    }

    .el-select-dropdown__item {
      color: #11FEEE;
    }

    .el-select-dropdown__item.hover {
      background: #0049af;
    }
  }

  #main{
    flex: 1;
    width: 100%;

  :v-deep(.el-popper__arrow) {
    &::before {
      background-color: rgba(10, 31, 92, .6) !important;
      border: 1px solid rgba(17, 254, 238, .4);
    }
  }
</style>
}
</style>