From e2ddf84cce119757b3f6d63e9f68b0d1a78aa27b Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期三, 23 四月 2025 09:57:22 +0800
Subject: [PATCH] 修改大屏
---
src/views/hazardousChemicals/bigScreen/components/leftTop.vue | 177 ++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 134 insertions(+), 43 deletions(-)
diff --git a/src/views/hazardousChemicals/bigScreen/components/leftTop.vue b/src/views/hazardousChemicals/bigScreen/components/leftTop.vue
index cd5a7da..d787bd5 100644
--- a/src/views/hazardousChemicals/bigScreen/components/leftTop.vue
+++ b/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[0].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>
\ No newline at end of file
--
Gitblit v1.9.2