修改大屏

马宇豪

2025-04-28 e1d380a930e73d8355a4695ca5f5b91f471c2394

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

@@ -1,20 +1,89 @@
<template>
  <div class="charts-container">
    <el-select
        clearable
        v-model="data.queryParams.companyId"
        filterable
        remote
        :teleported="false"
        reserve-keyword
        placeholder="请选择企业"
        remote-show-suffix
        :remote-method="getData"
        style="width: 100%"
    >
      <el-option
          v-for="item in data.companyList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
      />
    </el-select>
    <div class="top">
        共计<span>41515152</span>人/次
      共计<span>{{data.totalCount}}</span>人/次
    </div>
    <div id="main"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
import {onMounted, reactive} from "vue";
import {getCompany} from "@/api/hazardousChemicals/company";
import {ElMessage} from "element-plus";
import {getDayUseStatistic} from "@/api/monitor/screenCharts";

onMounted(()=>{
  initChart()
onMounted(async () => {
  await getCompanyList()
  await getData()
})

const initChart =()=>{
const data = reactive({
  queryParams: {
    companyId: null
  },
  companyList: [],
  totalCount: 0
})
const getCompanyList = async (val)=>{
  if(val){
    const queryParams = {
      name: val
    }
    const res = await getCompany(queryParams)
    if (res.code == 200) {
      data.companyList = res.data.list
    } else {
      ElMessage.warning(res.message)
    }
  }else {
    const queryParams = {
      pageNum: 1,
      pageSize: 999
    }
    const res = await getCompany(queryParams)
    if (res.code == 200) {
      data.companyList = res.data.list
      if(data.queryParams.companyId == null){
        data.queryParams.companyId = data.companyList[data.companyList.length - 1].id
      }
    } else {
      ElMessage.warning(res.message)
    }
  }
}


const getData = async ()=>{
const res = await getDayUseStatistic(data.queryParams.companyId)
  if (res.code == 200) {
    initChart(res.data || [])
    data.totalCount = res.data.find(i=>i.totalCount >0)?.totalCount || 0
  } else {
    ElMessage.warning(res.message)
  }
}

const initChart = (data) => {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;
@@ -34,8 +103,8 @@
    ],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel:{
      data: data.map(i=>i.hour + ':00'),
      axisLabel: {
        color: '#fff'
      },
      axisTick: {
@@ -45,12 +114,12 @@
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle:{
        lineStyle: {
          color: 'rgba(255,255,255,.1)',
          type: 'dashed'
        }
      },
      axisLabel:{
      axisLabel: {
        color: 'rgba(255,255,255,.6)'
      }
    },
@@ -63,19 +132,19 @@
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        data: data.map(i=>i.count),
        type: 'line',
        label:{
        label: {
          show: true,
          color: '#fff',
          textBorderColor: 'transparent',
          fontSize: 8
        },
        // showSymbol: false,
        lineStyle:{
        lineStyle: {
          color: '#54d5ff'
        },
        itemStyle:{
        itemStyle: {
          color: '#54d5ff',
        }
      }
@@ -94,41 +163,63 @@
  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: 28px;
  box-shadow: none;
  border: 1px solid #11FEEE;
  background: rgba(6,24,88,.6);
  color: #fff;
}
:deep(.el-input__inner){
  color: #02CDE6;
}
:deep(.el-input .el-select__caret){
  color: #02CDE6
}
:deep(.el-popper.is-light){
  background: rgb(8,44,97);
  .el-select-dropdown__item{
    color: #fff;
    &:hover{
      background: #015fb0;
    }
  }

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

  }
</style>
}
</style>