From 91f2640c8919e7cbe41c8c437e4f7fd60345e062 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期二, 22 四月 2025 10:47:00 +0800
Subject: [PATCH] 修改大屏
---
src/views/hazardousChemicals/bigScreen/components/leftTop.vue | 148 +++++++++++++++++++++++++++++-------------------
1 files changed, 89 insertions(+), 59 deletions(-)
diff --git a/src/views/hazardousChemicals/bigScreen/components/leftTop.vue b/src/views/hazardousChemicals/bigScreen/components/leftTop.vue
index 1c95347..d787bd5 100644
--- a/src/views/hazardousChemicals/bigScreen/components/leftTop.vue
+++ b/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;
}
}
}
--
Gitblit v1.9.2