修改大屏

马宇豪

2025-04-21 cc41c6680e4230f9e3f7c8bc3552841c577d812d

修改大屏

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

@@ -3,6 +3,9 @@
    <div class="top">
        共计<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>
@@ -13,7 +16,9 @@
onMounted(()=>{
  initChart()
})

const lineQuery = {
  companyId: 1
}
const initChart =()=>{
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
@@ -94,12 +99,14 @@
  font-style: normal;
  font-weight: normal;
}

.charts-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

  .top{
    width: 100%;
    font-size: 14px;
@@ -119,8 +126,7 @@
      letter-spacing: 4px;
      border-top: 1px solid #155285;
      border-bottom: 1px solid #155285;
      background:
          url('../../../../assets/bigScreen/numberBg.png') left center no-repeat,
    background: url('../../../../assets/bigScreen/numberBg.png') left center no-repeat,
          url('../../../../assets/bigScreen/numberBg.png') right center no-repeat;
      background-size: 1px 100%;
    }
@@ -129,6 +135,99 @@
  #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;
    }
  }

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