修改大屏

马宇豪

2025-04-22 91f2640c8919e7cbe41c8c437e4f7fd60345e062

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

@@ -1,25 +1,89 @@
<template>
  <div class="charts-container">
    <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
        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>{{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 lineQuery = {
  companyId: 1

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[0].id
      }
    } else {
      ElMessage.warning(res.message)
    }
  }
}
const initChart = () => {


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;
@@ -39,7 +103,7 @@
    ],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      data: data.map(i=>i.hour + ':00'),
      axisLabel: {
        color: '#fff'
      },
@@ -68,7 +132,7 @@
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        data: data.map(i=>i.count),
        type: 'line',
        label: {
          show: true,
@@ -137,58 +201,24 @@
  width: 100%;
}
:deep(.el-input__wrapper){
  height: 24px;
  height: 28px;
  box-shadow: none;
  border: 1px solid #11FEEE;
  background: rgba(6,24,88,.6);
  color: #fff;

  .el-icon{
    display: none;
    color: #fff;
  }
}
</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);
: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;
  }
  .el-select {
    width: 100%;
    height: 24px;
    input.el-input__inner{
      font-size: 10px;
      color: #fff !important
    }
    .el-icon{
      display: none;
      color: #fff;
    }
  }
  :deep(.el-popper){
    background: rgba(10,31,92,1) !important;
    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);
    &:hover{
      background: #015fb0;
    }
  }
}